<template>
  <div class="seven">
    <div class="seven-one">
      <div class="seven-two">文章标题</div>
      <el-input
        v-model="arr.tagName"
        placeholder="请输入内容"
        class="custom-input"
      ></el-input>
      <div class="seven-two">发布时间</div>
      <div class="block">
        <el-date-picker
          v-model="startDate1"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          class="custom-date-picker"
          value-format="yyyy-MM-dd hh:mm:ss"
        >
        </el-date-picker>
      </div>

      <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
      <el-button @click="resetForm">重置</el-button>
    </div>

    <div class="seven-three">
      <el-button type="primary" icon="el-icon-edit" class="seven-three-button"  @click="open">新增</el-button
      >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="名称" width="300" class="seven-three-el">
          <template slot-scope="scope">
            <span style="margin-left: .625rem">{{ scope.row.name }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="创建时间" width="250" class="seven-three-el">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: .625rem">{{ scope.row.createTime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="bloc">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="arr.current"
          :page-sizes="sizes"
          :page-size="arr.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id:"",
      sizes: [10, 20, 30, 40, 50],
      total: 0,
      tableData: [],
      input: "",
      startDate1: [],
      arr: {
        current: 1,
        size: 10,
        tagName: "",
        startDate:"" ,
        endDate:"" ,
      },
      arr1: {
        current: 1,
        size: 10,
        tagName: "",
        startDate:"" ,
        endDate:"" ,
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {

    open() {
  this.$prompt('分类名称', '新增分类', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
  })
  // 关键修复：解构 $prompt 返回的 value（用户输入的内容）
  .then(({ value }) => { 
    // 新增：输入合法性校验（避免用户输入空值）
    if (!value.trim()) {
      this.$message.error('分类名称不能为空，请重新输入');
      return; // 空值时终止后续接口调用
    }

    // 接口调用：此时 value 已定义，可正常传递给后端
    this.$axios
      .post('/api/api/admin/tag/add', { 
        tags:[value]
      })
      .then((res) => {
        if (res.data.success) { 
          this.$message({
            type: 'success',
            message: '添加成功' // 优化：删除末尾多余空格
          });
          this.getList(); // 刷新表格，显示新增的分类
        } else {
          // 后端返回失败时，显示后端提示文案（更友好）
          this.$message.error(res.data.msg || '添加失败，请重试');
        }
      })
      .catch((err) => {
        console.error('新增分类接口请求失败：', err);
        this.$message.error('网络异常，添加失败');
      });
  })
  .catch(() => {
    this.$message({
      type: 'info',
      message: '取消输入'
    });
  });
},
    
      handleDelete(index, row) {
       
           this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          
          console.log("删除");
          console.log(row.id);
          this.id = row.id;

          this.$axios
            .post(`/api/api/admin/tag/delete`,{
              tagId:this.id
            })
            .then((res) => {
              console.log(res);
                this.getList(); 
            })
            .catch((err) => {
              console.log(err);
            });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
    
    submitForm() {
      
          this.arr.startDate = this.startDate1[0];
          this.arr.endDate = this.startDate1[1];
          this.getList();
       
    },
    resetForm (){
      this.arr=structuredClone(this.arr1)
      this.startDate1=null
    },
    getList() {
      this.$axios
        .post(`/api/api/admin/tag/list`, this.arr)
        .then((res) => {
          this.tableData = res.data.data.records;
          console.log(this.tableData, "1111");
          console.log(res);
          this.total = res.data.data.total;
          console.log(this.total,"总页数");
          
          console.log(this.arr.current, "yema ");
        
          
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.arr.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.arr.current = val;
      this.getList();
    },
  },
};
</script>

<style scoped>
.seven-one {
  width: 100%;
  height: 4.0625rem;
  background-color: white;
  display: flex;
  /* justify-content: space-around; */
  align-items: center;
  border-radius: .3125rem;
}
::v-deep .custom-input {
  width: 12.5rem;
}
.seven-two {
  margin-left: 3.125rem;
  margin-right: 1.25rem;
}
::v-deep .custom-date-picker {
  margin-right: 3.125rem;
}
.seven-three {
  width: 100%;
  background-color: white;
  margin-top: 1.25rem;
  border-radius: .3125rem;
}
.seven-three-button {
  margin: 1.25rem;
}
.seven-three-el {
  margin: 1.25rem;
}
.bloc {
  text-align: center;
  margin-top: 1.25rem;
  height: 2.1875rem;
}
</style>